<template>
  <div class="app-container">
    <div class="container-header-title">会员提现申请列表</div>
    <el-row class="button-panel">
      <select-button
        text="全部"
        :isSelect="selectbtn === 0"
        :index="0"
        @clickBtn="changeSelectBtn"
      />
      <select-button
        text="待审核"
        :isSelect="selectbtn === 1"
        :index="1"
        @clickBtn="changeSelectBtn"
      />
      <select-button
        text="待打款"
        :isSelect="selectbtn === 2"
        :index="2"
        @clickBtn="changeSelectBtn"
      />
      <select-button
        text="已完成"
        :isSelect="selectbtn === 3"
        :index="3"
        @clickBtn="changeSelectBtn"
      />
      <select-button
        text="打款异常"
        :isSelect="selectbtn === 4"
        :index="4"
        @clickBtn="changeSelectBtn"
      />
      <select-button
        text="审核未通过"
        :isSelect="selectbtn === 5"
        :index="5"
        @clickBtn="changeSelectBtn"
      />
    </el-row>
    <el-form :inline="true" :model="formInline" class="form-inline">
      <el-form-item>
        <el-date-picker
          v-model="formInline.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.options">
          <el-option label="全部" value="全部"></el-option>
          <el-option label="待审核" value="待审核"></el-option>
          <el-option label="待打款" value="待打款"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="打款异常" value="打款异常"></el-option>
          <el-option label="审核未通过" value="审核未通过"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formInline.OrderID"
          placeholder="请输入提现流水单号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#f5f5f6', color: '#676a6c' }"
    >
      <el-table-column prop="OrderID" label="流水单号"> </el-table-column>
      <el-table-column prop="UserName" label="用户昵称" width="140">
      </el-table-column>
      <el-table-column prop="Tel" label="手机号"> </el-table-column>
      <el-table-column prop="ApplicationDate" label="审核时间">
      </el-table-column>
      <el-table-column prop="CashWithdrawalAmount" label="提现金额">
      </el-table-column>
      <el-table-column prop="State" label="状态">
        <template slot-scope="scope">
          <span
            v-if="scope.row.State == '审核未通过'"
            :style="{ color: 'red' }"
            >{{ scope.row.State }}</span
          >
          <span v-else :style="{ color: '#199efa' }">{{
            scope.row.State
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="details(scope.$index, scope.row)"
            >详细</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import SelectButton from "./SelectButton.vue";
export default {
  components: { SelectButton },
  data() {
    return {
      selectbtn: 0, //当前选中的第几个按钮
      formInline: {
        time: "",
        OrderID: "",
        options: "全部",
      },
      tableData: [
        {
          OrderID: "12313", //流水单号
          UserName: "王小虎", //用户昵称
          Tel: "234", //手机号
          ApplicationDate: "3.2", //申请时间
          CashWithdrawalAmount: 10, //提现金额
          State: "审核未通过", //状态
        },
        {
          OrderID: "12313", //流水单号
          UserName: "王小虎", //用户昵称
          Tel: "234", //手机号
          ApplicationDate: "3.2", //申请时间
          CashWithdrawalAmount: 10, //提现金额
          State: "已完成", //状态
        },
        {
          OrderID: "12313", //流水单号
          UserName: "王小虎", //用户昵称
          Tel: "234", //手机号
          ApplicationDate: "3.2", //申请时间
          CashWithdrawalAmount: 10, //提现金额
          State: "审核未通过", //状态
        },
        {
          OrderID: "12313", //流水单号
          UserName: "王小虎", //用户昵称
          Tel: "234", //手机号
          ApplicationDate: "3.2", //申请时间
          CashWithdrawalAmount: 10, //提现金额
          State: "审核未通过", //状态
        },
        {
          OrderID: "12313", //流水单号
          UserName: "王小虎", //用户昵称
          Tel: "234", //手机号
          ApplicationDate: "3.2", //申请时间
          CashWithdrawalAmount: 10, //提现金额
          State: "审核未通过", //状态
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      console.log(this.formInline);
    },
    changeSelectBtn(index) {
      // console.log(1111, index);
      if (index == this.selectbtn) return;
      this.selectbtn = index;
    },
    details(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style lang="scss" scoped>
.container-header-title {
  border-bottom: 1px solid #f1f2f4;
  padding-bottom: 10px;
}
.button-panel {
  margin: 20px 0 30px;
}
.form-inline {
  float: right;
}
</style>